<template>
    <div class="recommend-music ">
        <h2 class="title">推荐新音乐</h2>
        <song-list :songList="songs"></song-list>
    </div>
</template>

<script>
import songList from '@/components/common/songList/Index'
import { createSong } from '@/model/song'

export default {
    data() {
        return {
            songs: []
        }
    },
    components: {
        songList
    },
    created() {
    },
    mounted() {
        this.getNewSongs()
    },
    methods: {
        // 获取推荐新音乐
        async getNewSongs() {
            const { data: res } = await this.$api.getNewSongs();
            let list = [];
            if (res.code !== 200) {
                return this.$message.error('获取推荐新音乐失败！')
            }
            res.result.map(item => {
                list.push(item.id)
            })
            this.getSongDetail(list);
        },
        // 获取歌曲列表
        async getSongDetail(sliceArr) {
            let timestamp = new Date().valueOf()
            sliceArr = sliceArr.join(',')
            const { data: res } = await this.$api.getSongDetail(sliceArr, timestamp)
            this.songs = this.normalizeSongs(res.songs)
            // console.log(this.songs);
            // this.$store.dispatch('playList', this.songs)
            // this.setPlayList(this.songs)

        },
        // 处理歌曲
        normalizeSongs(list) {
            let ret = []
            list.map(item => {
                if (item.id) {
                    ret.push(createSong(item))
                }
            })
            return ret
        },
    }
}
</script>

<style lang="less" scoped>
</style>